<template>
  <u-index-list :indexList="indexList">
    <view class="list">
      <view class="list__item">
        <u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
        <text class="list__item__user-name">新的朋友</text>
      </view>
      <u-line></u-line>
      <view class="list__item">
        <u-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></u-avatar>
        <text class="list__item__user-name">标签</text>
      </view>
      <u-line></u-line>
      <view class="list__item">
        <u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
        <text class="list__item__user-name">朋友圈</text>
      </view>
      <u-line></u-line>
      <view class="list__item">
        <u-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></u-avatar>
        <text class="list__item__user-name">QQ</text>
      </view>
      <u-line></u-line>
    </view>
    <u-index-item v-for="(item, index) in state.onlineUserList" :key="index">
      <u-index-anchor :text="indexList[index]"></u-index-anchor>
      <view class="list" @click="toDetail(item)">
        <view class="list__item">
          <image class="list__item__avatar" :src="item.avatar"></image>
          <text class="list__item__user-name">{{ item.nickname }}</text>
        </view>
        <u-line></u-line>
      </view>
    </u-index-item>
    <view class="u-safe-area-inset--bottom">
      <text class="list__footer">共{{ state.total }}位好友</text>
    </view>
  </u-index-list>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import {getUserList} from "@/pages/api/im/im";

const state = reactive({
  onlineUserList: [],
  total: 0,
})
onMounted(async () => {
  await getUserListData();
})
const getUserListData = async () => {
  const {data: {data: {total, userList}}} = await getUserList() || {};
  state.onlineUserList = [...userList];
  state.total = total;
}
const indexList = () => {
  const indexList = []
  const charCodeOfA = 'A'.charCodeAt(0)
  indexList.push("↑")
  indexList.push("☆")
  for (let i = 0; i < 26; i++) {
    indexList.push(String.fromCharCode(charCodeOfA + i))
  }
  indexList.push('#')
  return indexList
}
const toDetail = (detail) => {
  console.log(detail)
  uni.$u.route('/pages/im/friendsList/chat', detail);
}
</script>

<style lang="scss">
.list {

  &__item {
    @include flex;
    padding: 6px 12px;
    align-items: center;

    &__avatar {
      height: 35px;
      width: 35px;
      border-radius: 3px;
    }

    &__user-name {
      font-size: 16px;
      margin-left: 10px;
      color: $u-main-color;
    }
  }

  &__footer {
    color: $u-tips-color;
    font-size: 14px;
    text-align: center;
    margin: 15px 0;
  }
}
</style>
